import { onMounted, ref, watch, nextTick } from "vue";
import * as echarts from "echarts";
import _ from "lodash";

function createChart(container: HTMLElement, options = {}) {
  const chart = echarts.init(container, "customed");
  const padding = 18;
  const mergedOptions = _.merge(
    {
      title: {
        textStyle: {
          color: "#fff",
          rich: {
            title: {
              fontSize: 16,
              fontWeight: "bold",
              fontFamily: "Microsoft YaHei",
            },
            subtitle: {
              fontSize: 10,
              fontWeight: "bold",
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        subtextStyle: {
          color: "#fff",
        },
        top: 0,
        right: 0,
        left: 0,
      },
      grid: {
        top: padding + 18 * 2,
        left: padding + 18 * 5,
        right: padding,
        bottom: 0,
      },
      // tooltip: {
      //   trigger: "axis",

      //   axisPointer: {
      //     type: "shadow",
      //   },
      // },
      tooltip: {
        trigger: "axis",

        formatter: function (params) {
          console.log("params", params);
          const item = params[0];
          const result =
              `<div><p>${item.data.type}总人数：${item.data.count}人</p><p>已筛查人数：${item.data.num}人</p><p>筛查进度：${item.data.rate}%</p></div>`
          return result;
        },
      },
      xAxis: {
        splitLine: {
          lineStyle: {
            type: "dashed",
          },
        },
        interval: 5,
        max: 100,
        min: 0,
        position: 'top',
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
          },
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: "#fff",
          },
        },
      },
      yAxis: {
        type: "category",

        axisLabel: {
          interval: 0,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff",
          },
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: "#fff",
          },
        },
      },
      series: [],
    },
    options
  );
  chart.setOption(mergedOptions);
  return chart;
}

export function useGeneralChart(props, context) {
  const containerRef = ref<HTMLElement>();
  let chart: echarts.ECharts;
  const sort = ref(false);

  onMounted(() => {
    chart = createChart(containerRef.value, {
      title: {
        text: [
          `{title|${props.title}}`,
          `{subtitle|${props.subTitle || ""}}`,
        ].join(" "),
      },
    });
  });

  function genOptions(props) {
    const labels = props.data.map((item) => item[props.label]);
    const series = props.legend.map(({ key, label }) => {
      return {
        type: "bar",
        name: label,
        // stack: "stack",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
        data: props.data
          .sort((a, b) => {
            return sort.value ? b.rate - a.rate : a.rate - b.rate;
          }).map(item => ({...item, value: item.rate})),
      };
    });
    return {
      yAxis: {
        data: labels,
      },
      series,
    };
  }
  watch(
    () => props.data,
    () => {
      const options = genOptions(props);
      chart.setOption(options);
    }
  );

  watch(sort, function (value) {
    const options = genOptions(props);
    chart.setOption(options);
  });

  watch(props.height, () => {
    chart.resize();
  });
  window.addEventListener("resize", () => {
    chart.resize();
  });

  return {
    containerRef,
    sort,
  };
}
